<template>
  <div class="page-container">
    <el-form ref="formRef" :model="form" :rules="rules" class="form-wrapper">
      <div class="title">登录</div>
      <el-form-item label="帐号" prop="account">
        <el-input
          v-model.trim="form.account"
          v-focus
          placeholder="请输入用户名"
          tabindex="1"
          type="text"
        />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          :key="passwordType"
          ref="password"
          v-model.trim="form.password"
          :type="passwordType"
          tabindex="2"
          placeholder="请输入密码"
          @keyup.enter.native="handleSubmit"
        />
        <span
          v-if="passwordType === 'password'"
          class="show-password"
          @click="handlePassword"
        >
          <vab-icon :icon="['fas', 'eye-slash']"></vab-icon>
        </span>
        <span v-else class="show-password" @click="handlePassword">
          <vab-icon :icon="['fas', 'eye']"></vab-icon>
        </span>
      </el-form-item>
      <el-button
        :loading="loading"
        class="btn-primary"
        type="primary"
        @click="handleSubmit"
      >
        登录
      </el-button>
      <el-row class="actions">
        <el-col :span="12">
          <router-link to="/register">注册</router-link>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <router-link to="/forget-password">忘记密码</router-link>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import { isPassword } from '@/utils/validate'

  export default {
    name: 'Login',
    directives: {
      focus: {
        inserted(el) {
          el.querySelector('input').focus()
        },
      },
    },
    data() {
      const validateUsername = (rule, value, callback) => {
        if ('' == value) {
          callback(new Error('用户名不能为空'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (!isPassword(value)) {
          callback(new Error('密码不能少于6位'))
        } else {
          callback()
        }
      }
      return {
        nodeEnv: process.env.NODE_ENV,
        title: this.$baseTitle,
        form: {
          account: '',
          password: '',
        },
        rules: {
          account: [
            {
              required: true,
              trigger: 'change',
              validator: validateUsername,
            },
          ],
          password: [
            {
              required: true,
              trigger: 'change',
              validator: validatePassword,
            },
          ],
        },
        loading: false,
        passwordType: 'password',
        redirect: undefined,
      }
    },
    watch: {
      $route: {
        handler(route) {
          this.redirect = (route.query && route.query.redirect) || '/'
        },
        immediate: true,
      },
    },
    created() {
      document.body.style.overflow = 'hidden'
    },
    beforeDestroy() {
      document.body.style.overflow = 'auto'
    },
    mounted() {
      this.form.account = '15828642087'
      this.form.password = '123456'
    },
    methods: {
      handlePassword() {
        this.passwordType === 'password'
          ? (this.passwordType = '')
          : (this.passwordType = 'password')
        this.$nextTick(() => {
          this.$refs.password.focus()
        })
      },
      handleSubmit() {
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            this.loading = true
            this.$store
              .dispatch('user/login', this.form)
              .then(() => {
                const routerPath =
                  this.redirect === '/404' || this.redirect === '/401'
                    ? '/'
                    : this.redirect
                this.$router.push(routerPath).catch(() => {})
                this.loading = false
              })
              .catch(() => {
                this.loading = false
              })
          } else {
            return false
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import './style.scss';

  .page-container {
    width: 360px;

    .form-wrapper {
      margin: calc((100vh - 440px) / 2) 0 0;

      .show-password {
        position: absolute;
        top: 56px;
        right: 20px;
        font-size: 16px;
        color: #d7dee3;
        cursor: pointer;
        user-select: none;
      }
    }
  }
</style>
